<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>为所欲为</title>

    <meta name="author" content="lizhihao!">

  	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<h1>
				动图制作Java版
			</h1>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<p>
			<div class="alert alert-danger" role="alert">根据提示填写内容，点击生成即可获得动图，服务器配置低，所以处理比较慢，请耐心等待。</div>
			</p>
		</div
	<div class="row">
		<p></p>
		<div class="col-md-12">
			<div class="tabbable" id="tabs1">
				<ul class="nav nav-pills">
					<li class="active">
						<a href="#panel-1" data-toggle="tab" id="sorry">为所欲为</a>
					</li>
					<li>
						<a href="#panel-2" data-toggle="tab" id="wangjingze">王境泽</a>
					</li>
					<li>
						<a href="#panel-3" data-toggle="tab" id="dashixiong">大师兄</a>
					</li>
					<li>
						<a href="#panel-4" data-toggle="tab" id="dagong">打工</a>
					</li>
				</ul>
				<br>
				<div class="tab-content">
					<div class="tab-pane active" id="panel-1">
						<div class="row">
							<div class="col-md-6">
								<img class="center-block img-responsive" alt="为所欲为" src="http://cdn.txtxtx.com.cn/sorry.jpg">
							</div>
							<div class="col-md-6">
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="sorry_sen" placeholder="好啊">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="sorry_sen" placeholder="别说我是一等良民">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="sorry_sen" placeholder="就算你们真的想要诬告我">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="sorry_sen" placeholder="我有的是钱找律师帮我打官司">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="sorry_sen" placeholder="我想我根本不用坐牢">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											B:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="sorry_sen" placeholder="你别以为有钱了不起啊">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="sorry_sen" placeholder="sorry 有钱是真的能为所欲为的">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="sorry_sen" placeholder="不过我相信你不会明白这种感觉">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											C:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="sorry_sen" placeholder="不明白 不明白">
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="panel-2">
						<div class="row">
							<div class="col-md-6">
								<img class="center-block img-responsive" alt="王境泽" src="http://cdn.txtxtx.com.cn/wangjingze.jpg">
							</div>
							<div class="col-md-6">
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="wangjingze_sen" placeholder="我就是饿死">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="wangjingze_sen" placeholder="死外边 从这跳下去">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="wangjingze_sen" placeholder="也不会吃你们 一点东西">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="wangjingze_sen" placeholder="真香">
										</div><br><br><br><br>
									</div>
								</form>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="panel-3">
						<div class="row">
							<div class="col-md-6">
								<img class="center-block img-responsive" alt="大师兄" src="http://cdn.txtxtx.com.cn/dashixiong.jpg">
							</div>
							<div class="col-md-6">
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dashixiong_sen" placeholder="如果各位有兴趣可以加入我空手道部">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dashixiong_sen" placeholder="不过要先经过选拔">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dashixiong_sen" placeholder="因为我只会训练精英">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dashixiong_sen" placeholder="绝对不会接受">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dashixiong_sen" placeholder="垃圾">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											B:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dashixiong_sen" placeholder="看我干嘛, 你把我当垃圾啊">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dashixiong_sen" placeholder="不要误会，我不是针对你">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dashixiong_sen" placeholder="我是说在座的各位">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dashixiong_sen" placeholder="都是垃圾">
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
					<div class="tab-pane" id="panel-4">
						<div class="row">
							<div class="col-md-6">
								<img class="center-block img-responsive" alt="打工" src="http://cdn.txtxtx.com.cn/dagong.jpg">
							</div>
							<div class="col-md-6">
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dagong_sen" placeholder="没有钱啊">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dagong_sen" placeholder="不做的话没有钱用">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											B:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dagong_sen" placeholder="那你不会去打工啊">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											B:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dagong_sen" placeholder="有手有脚的">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dagong_sen" placeholder="打工是不可能打工的">
										</div>
									</div>
									<div class="form-group">
										<label  class="col-sm-2 control-label">
											A:
										</label>
										<div class="col-sm-10">
											<input type="text" class="form-control" name="dagong_sen" placeholder="这辈子不可能打工的">
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<br><br>
		<div class="col-md-12 text-center">
			<label class="radio-inline">
				<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="simple" alt="小文件，质量低"> 小图(表情包)
			</label>
			<label class="radio-inline">
				<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="normal" checked alt="大文件，质量高"> 大图（论坛微博）
			</label>
		</div>
		<br><br>
	</div>
	<div class="row">
		<div class="col-md-12">
			<input type="hidden" id="template" value="sorry">
			<button id="render" type="button" class="btn btn-primary btn-lg center-block" data-loading-text="生成中..." >
				<!--data-target="#myModal"-->
				生成
			</button>
		</div>
	</div>
	<div class="row">
		<br><br>
		<div class="col-md-12">
			<p>
				<img id="result" class="center-block img-responsive" src="">
				<a id="download" href="#" target="_blank">
					<button id="downloadbtn" type="button" class="btn btn-default center-block hidden" aria-label="Left Align">
						猛击打开<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
					</button>
				</a>
			</p>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<p>
				<div class="alert alert-success" role="alert">请自行保存，服务器仅保存10分钟，可以关注微信平台sorrygif，新模板推出会通知哦</div>
				<img class="center-block img-responsive" src="http://cdn.txtxtx.com.cn/gcode.jpg">
			</p>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12 text-center">
			<a href="https://github.com/li24361/sorryJava" , target="_blank">
				<svg aria-hidden="true" class="w3-opacity" height="24" version="1.1" viewBox="0 0 16 16" width="24">
					<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
				</svg>
			</a>
		</div>
	</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--<script src="js/jquery.min.js"></script>-->
<!--<script src="js/bootstrap.min.js"></script>-->
<!--<script src="js/scripts.js"></script>-->
<!--<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>-->
<!--<script src='//unpkg.com/valine/dist/Valine.min.js'></script>-->
</body>
<script>
	$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//		e.target // newly activated tab
//		e.relatedTarget // previous active tab
		$('#template').val(e.target.id)
	})
	$('#render').bind('click', function () {
		var $btn = $(this).button('loading')
		$('#render').prop('disabled', true);
		var template = $('#template').val()
		var inputs = $("input[name='" + template + "_sen']")
		var all = [];
		var ischange = false;
		inputs.each(function (i, e) {
			e.value = e.value === '' ? e.placeholder : e.value
            if (e.value !== e.placeholder) {
                ischange = true;
            }
			all.push(e.value)
		})
        if (!ischange){
            alert("生成成功！欢迎扫码关注公众号！");
            $('#download').attr('href', "http://cdn.txtxtx.com.cn/"+template+".gif");
            $btn.button('reset')
            $('#render').prop('disabled', false);
            $('#downloadbtn').removeClass('hidden')
            return;
		}

		var json = {
			"templateName": template,
			"sentence": all.join(),
			"mode":$("input:checked").val()
		}

		$.ajax({
			type: "POST",
			url: "/gif/filePath",
			data: JSON.stringify(json),
			contentType: "application/json",
			dataType: 'json'
		}).done(function (msg) {
			if (msg.code=='0'){
                alert("生成成功！快去看看吧！");
				$('#download').attr('href', msg.result);
			} else {
				alert("服务器爆掉了，请稍后再试！");
//				$('#result').attr('src', 'http://cdn.txtxtx.com.cn/money.jpg');
			}
		}).error(function (jqxhr, textStatus, errorThrown) {
			alert("服务器爆掉了，请稍后再试！赞赏给作者点鼓励吧。");
//			$('#result').attr('src', 'http://cdn.txtxtx.com.cn/money.jpg');
		}).complete(function () {
			$btn.button('reset')
			$('#render').prop('disabled', false);
			$('#downloadbtn').removeClass('hidden')
		});
	});
//	$('#result').load(function() {
//		$('#render').button('reset')
//		$('#render').prop('disabled', false);
//	});
</script>
</html>